<template>
	<view class="single-select" :style="[visible?{backgroundColor:bgColor}:{backgroundColor:unbgColor,borderColor:borderColor,borderWidth:borderWidth,borderStyle:borderStyle},{transform:scale}]" @tap="onClick">
		<view class="short-side">
			<view class="long-side"></view>
		</view>
	</view>
</template>

<script setup>
	import {ref, watch} from "vue";
	let props = defineProps({
		selectShow: {
		    type: Boolean,
		    default: false
		},
		unbgColor: {
		    type: String,
		    default: function(){
				return "none";
			}
		},
		bgColor: {
		    type: String,
		    default: function(){
				return "#D22C14";
			}
		},
		borderColor: {
		    type: String,
		    default: function(){
				return "#D22C14";
			}
		},
		borderWidth: {
		    type: String,
		    default: function(){
				return "1rpx";
			}
		},
		borderStyle: {
		    type: String,
		    default: function(){
				return "solid";
			}
		},
		scale: {
		    type: String,
		    default: function(){
				return "scale(1)";
			}
		}
	})

let visible = ref(false)
//-----------------------------------watch--------------------------
	  
	watch(() => props.selectShow,(newVal,oldVal) => {
		console.log(newVal,'newValue')
		console.log(oldVal,'oldValue')
	  visible.value = newVal
	  console.log(visible.value,'visible.value')
	},{immediate:true})	
	

//-----------------------------------function------------------


const emits = defineEmits(['click'])
const onClick = () => {
  emits('click')
}

	
	
</script>

<style scoped lang="scss">
	.single-select{
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.2s ease-in;
		.short-side{
			width: 10rpx;
			height: 4rpx;
			border-radius: 2rpx;
			background-color: #fff;
			transform: rotateZ(-130deg);
			transform-origin: center;
			margin: 0 0 -7rpx -15rpx;
			.long-side{
				width: 22rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: #fff;
				transform: rotateZ(90deg);
				transform-origin: left;
				margin-top: -2rpx;
			}
		}
	}
</style>
